$set在项目中的实用

最近$set疯狂用， 记录一下
评论页面的每条留言的状态 和留言下每条留言的状态 强制刷新
数据的格式是

[
 {demo1
  content:'',
  id:1,
  replyList:[{
   replyContent:'',
   replyId:0
   },{
  replyContent:'',
   replyId:1}]
  },
demo2
  content:'',
  id:1,
  replyList:[{
   replyContent:'',
   replyId:0
   },{
  replyContent:'',
   replyId:1}]
  },...
]

针对一级回复和二级回复的回复状态点击时每次只能显示一个回复框的封装

async closeDialog () {
      let self = this
      self.componentData.list.forEach((value, key) => {
        let obj = { ...value }
        obj.commentVisiable = false
        if ('commentReplyList' in obj) {
          obj.commentReplyList = obj.commentReplyList.map((item) => {
            let newList = { ...item }
            newList.replyVisiable = false
            return newList
          })
        }
        self.$set(self.componentData.list, key, obj)
      })
    },

一级

forAnswer (item, index) {
      let newVal = Object.assign(item)
      newVal.commentVisiable = !newVal.commentVisiable
      if ('commentReplyList' in newVal) {
        newVal.commentReplyList = newVal.commentReplyList.map((item) => {
          let newList = { ...item }
          newList.replyVisiable = false
          return newList
        })
      }
      this.$set(this.componentData.list, index, newVal)
    },
    // 一级回复
    async answerAction (item, index, type) {
      let self = this
      if (type === 1) {
        await self.closeDialog()
      }
      this.forAnswer(item, index)
    },

二级回复

// 二级回复
    forReply (reply, indexa, indexb) {
      let newVal = Object.assign(reply)
      newVal.replyVisiable = !newVal.replyVisiable
      let secondList = [...this.componentData.list[indexa].commentReplyList]
      secondList[indexb] = newVal
      let newComponentOjb = Object.assign(this.componentData.list[indexa])
      newComponentOjb.commentReplyList = secondList
      this.$set(this.componentData.list, indexa, newComponentOjb)
    },
    // 二级回复
    async replyAction (reply, indexa, indexb, type) {
      let self = this
      if (type === 1) {
        await self.closeDialog()
      }
      this.forReply(reply, indexa, indexb)
    },

提交回复

//一级
// 提交回复
    answerSubmit (item, index) {
      this.forAnswer(item, index)
      var self = this
      let userCode = this.componentData.list[index].userCode
      // let commentId = this.componentData.list[index].commentId
      this.axios
        .post(self.publicPath + '/comment/addCommentReply', {
          commentId: item.id,
          replyUserCode: userCode,
          replyContent: item.replyContent
        })
        .then(res => {
          if (res.data.code == 1) {
            self.$message.success('发布成功')
            self.commentContent = ''
            self.$emit('childFn', item.commentTargetId)
          } else {
            self.$message.error('发布失败')
          }
        })
    },